﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大数据展示单模块组合版</title>
    <link rel="stylesheet" href="static/css/animate.min.css"/>
    <link rel="stylesheet" href="static/css/rank/jquery.zySlide.css"/>
    <link rel="stylesheet" href="static/css/benguan_style/benguan_style.css"/>
    <link rel="stylesheet" href="static/css/swiper.min.css"/>
    <link rel="stylesheet" href="static/css/index.css"/>
</head>
<body>
<div class="kp_all">
    <div class="kp_header">
        <div class="header_logo">
            <div class="logo_bg_left"></div>
            <div class="logo_bg_right"></div>
            <div class="logo"></div>
            <div class="logo_txt"></div>
            <div class="logo_title">大数据分析展示平台</div>
        </div>
    </div>
    <div class="kp_date clearfix">
        <div class="kp_weather">
            <div class="kp_weather_ads" id="kplace"></div>
            <div class="kp_weather_what" id="kpweather"></div>
            <div class="kp_weather_temp" id="kptemp"></div>
        </div>
        <div class="kp_time">
            <div id="kp_clock"></div>
            <div id="kp_t">
                <span id="t_h"></span>
                <span id="t_m"></span>
                <div style="display: inline-block">
                    <span id="t_s"></span>
                    <p id="t_current">CURRENT TIME</p>
                </div>

            </div>
        </div>

    </div>
    <div class="swiper-container swiper-container-father">
        <div class="swiper-wrapper swiper-wrapper-father">
            <div class="swiper-slide swiper-slide-father" data-title="借阅排行">
                <div class="kp_rank clearfix">
                    <div class="rank_con">
                        <div class="rank_con_left clearfix">
                            <div id="Slide1" class="zy-Slide">
                                <ul class="book_img">
                                    <li class='bcover' data-title='梦里花落知多少'><img src="static/rank_img/000.png"/></li>
                                    <li class='bcover' data-title='你以为没有的，可能在来的路上'><img src="static/rank_img/1.jpg"/></li>
                                    <li class='bcover' data-title='鹿鼎记'><img src="static/rank_img/8.jpg"/></li>
                                    <li class='bcover' data-title='红军长征西征在宁夏'><img src="static/rank_img/3.jpg"/></li>
                                    <li class='bcover' data-title='古代天文历法讲座'><img src="static/rank_img/14.jpg"/></li>
                                    <li class='bcover' data-title='四大名捕'><img src="static/rank_img/6.jpg"/></li>
                                    <li class='bcover' data-title='殇'><img src="static/rank_img/7.jpg"/></li>
                                </ul>
                            </div>
                            <div class="rank_book_des"></div>
                        </div>
                        <div class="rank_con_right clearfix">
                            <ul>
                                <li class="clearfix">
                                    <img src="static/rank_img/NO.1.png"/>
                                    <div><span style="color:rgba(248,47,123,1);" class="rank_number">NO1</span><span class="rank_name_txt">红军长征西征在宁夏</span></div>
                                </li>
                                <li class="clearfix">
                                    <img src="static/rank_img/NO.2.png"/>
                                    <div><span style="color:rgba(251,216,25,1)" class="rank_number">NO2</span><span class="rank_name_txt">古代天文历法讲座</span></div>
                                </li>
                                <li class="clearfix">
                                    <img src="static/rank_img/NO.3.png"/>
                                    <div><span style="color:rgba(151,208,65,1)" class="rank_number">NO3</span><span class="rank_name_txt">四大名捕</span></div>
                                </li>
                                <li class="clearfix">
                                    <img src="static/rank_img/other.png"/>
                                    <div style="color:rgba(122,147,186,1)"><span class="rank_number">NO4</span><span class="rank_name_txt">殇</span></div>
                                </li>
                                <li class="clearfix">
                                    <img src="static/rank_img/other.png"/>
                                    <div style="color:rgba(122,147,186,1)"><span class="rank_number">NO5</span><span class="rank_name_txt">梦里花落知多少</span></div>
                                </li>
                                <li class="clearfix">
                                    <img src="static/rank_img/other.png"/>
                                    <div style="color:rgba(122,147,186,1)"><span class="rank_number">NO6</span><span class="rank_name_txt">你以为没有的可能在来的路上</span></div>
                                </li>
                                <li class="clearfix">
                                    <img src="static/rank_img/other.png"/>
                                    <div style="color:rgba(122,147,186,1)"><span class="rank_number">NO7</span><span class="rank_name_txt">鹿鼎记</span></div>
                                </li>
                                <li class="clearfix">
                                    <img src="static/rank_img/other.png"/>
                                    <div style="color:rgba(122,147,186,1)"><span class="rank_number">NO8</span><span class="rank_name_txt">大国的兴衰</span></div>
                                </li>


                            </ul>
                        </div>
                    </div>
                </div>
                <div class="kp_title">借阅排行榜</div>

            </div>
            <div class="swiper-slide swiper-slide-father" data-title="到馆统计">
                <div class="kp_count">
                    <div class="count_all">
                        <div class="count_txt">
                            <p>数&nbsp;据&nbsp;统&nbsp;计</p>
                            <p style="margin-top: 10px;font-size: 26px;">(&nbsp;实时更新&nbsp;)</p>
                        </div>
                        <div id="count_total"></div>
                        <div id="count_week"></div>
                        <div id="count_day"></div>
                        <div id="count_current"></div>
                        <div class="count_total_num">
                            <div class="total_txt pub_css">
                                <p><i class="pub_title_css">累计到馆</i><i class="total_small_txt" style="font-size: 18px;display: block;margin-bottom: 10px;">(从2017年1月开始)</i></p>
                                <p><span class="pub_num_css" id="myTargetElementt">532626274</span><span class="pub_ren_css">人次</span></p>
                            </div>

                        </div>
                        <div class="count_week_num">
                            <div class="week_txt pub_css">
                                <p class="pub_title_css">本周到馆</p>
                                <p><span class="pub_num_css" id="kp_count_num3">1967</span><span class="pub_ren_css">人次</span></p>
                            </div>
                        </div>
                        <div class="count_day_num">
                            <div class="day_txt pub_css">
                                <p class="pub_title_css">今日到馆</p>
                                <p><span class="pub_num_css" id="kp_count_num1">167</span><span class="pub_ren_css">人次</span></p>
                            </div>

                        </div>
                        <div class="count_current_num">
                            <div class="current_txt pub_css">
                                <p class="pub_title_css">当前在馆</p>
                                <p><span class="pub_num_css" id="kp_count_num2">67</span><span class="pub_ren_css">人次</span></p>
                            </div>

                        </div>

                    </div>

                </div>
                <div class="kp_title">到馆统计</div>


            </div>
            <div class="swiper-slide swiper-slide-father" data-title="本馆风采">
                <div class="kp_style">
                    <div class="m">
                        <ul class="diaporama1">
                            <li><img src="static/images/IMG_1881.JPG" alt="第一阅览室"/></li>
                            <li><img src="static/images/IMG_1941.JPG" alt="自修区"/></li>
                            <li><img src="static/images/IMG_1935.JPG" alt="第二阅览室"/></li>
                        </ul>
                    </div>


                    <!--<div class="swiper-container swiper-container-style">-->
                        <!--<div class="swiper-wrapper">-->
                            <!--<div class="swiper-slide swiper-slide-style">-->
                                <!--<img src="static/images/IMG_1881.JPG" alt=""/>-->
                            <!--</div>-->
                            <!--<div class="swiper-slide swiper-slide-style">-->
                                <!--<img src="static/images/IMG_1935.JPG" alt=""/>-->
                            <!--</div>-->
                            <!--<div class="swiper-slide swiper-slide-style">-->
                                <!--<img src="static/images/IMG_1941.JPG" alt=""/>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="swiper-pagination swiper-pagination-style"></div>-->
                    <!--</div>-->
                </div>
                <div class="kp_title">本馆风采</div>


            </div>
            <div class="swiper-slide swiper-slide-father" data-title="借还书系统">
                <div class="kp_line clearfix">
                    <div class="line_left">
                        <div class="line_left_title"><img src="./static/images/title.png" alt=""/></div>
                        <div class="borrow_line">
                            <div id="main3" style="margin:auto;width: 930px;height:500px;"></div>
                        </div>
                    </div>
                    <div class="line_right">
                        <ul>
                            <li>
                                <h3>今日借阅</h3>
                                <div class="box">
                                    <div><span class="number" id="myTargetElement">104</span><span class="ce">册</span></div>
                                </div>
                            </li>
                            <li>
                                <h3>本周借阅</h3>
                                <div class="box">
                                    <div><span class="number" id="myTargetElement2">2531</span><span class="ce">册</span></div>
                                </div>
                            </li>
                            <li>
                                <h3>累计借阅</h3>
                                <div class="box">
                                    <div><span class="number" id="myTargetElement3">45632865</span><span class="ce">册</span></div>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>
                <div class="kp_title">借还书系统</div>


            </div>
            <div class="swiper-slide swiper-slide-father" data-title="今日推荐">
                <div class="kp_recommend">
                    <div class="swiper-container swiper-container-recommend">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide swiper-no-swiping swiper-slide-recommend" data-index=1 style="background-image:url(static/recommend_img/recommend_bg.png);">
                                <div class="book_pi" style="background-image:url(static/recommend_img/24.jpg)"></div>
                                <div class="book_name">你以为没有的可能在来的路上</div>
                            </div>
                            <div class="swiper-slide swiper-no-swiping swiper-slide-recommend" data-index=2 style="background-image:url(static/recommend_img/recommend_bg.png);">
                                <div class="book_pi" style="background-image:url(static/recommend_img/25.jpg)"></div>
                                <div class="book_name">身体的妙药你知道吗？</div>

                            </div>
                            <div class="swiper-slide swiper-no-swiping swiper-slide-recommend" data-index=3 style="background-image:url(static/recommend_img/recommend_bg.png);">
                                <div class="book_pi" style="background-image:url(static/recommend_img/26.jpg)"></div>
                                <div class="book_name">红军长征西征在宁夏</div>

                            </div>
                        </div>
                        <div class="book_des">
                            <div>
                                <p>扫码即可看书</p>
                                <div class="guang_pic"></div>
                            </div>
                            <div>
                                <p>当前已扫码借阅</p>
                                <div class="guang_pic"></div>
                            </div>
                        </div>
                        <div class="read_num">
                            <span class="con_num"></span>
                            <span class="con_ren">人</span>
                        </div>

                        <!-- Add Pagination -->
                        <!--<div class="swiper-pagination"></div>-->
                    </div>
                    <div class="arrow_left"><img src="static/recommend_img/left_arrow.png" alt=""/><img src="static/recommend_img/left_arrow.png" alt=""/></div>
                    <div class="arrow_right"><img src="static/recommend_img/right_arrow.png" alt=""/><img src="static/recommend_img/right_arrow.png" alt=""/></div>


                </div>
                <div class="kp_title">今日推荐</div>



            </div>
            <div class="swiper-slide swiper-slide-father" data-title="通知公告">
                <div class="kp_notice">
                    <div class="notice_title"></div>
                    <div class="notice_con">
                        <!--<p>位于蒙山北路280号金文大厦内的金山图书馆新馆启用，内设综合办公室、宣传辅导部、古籍文献部、少儿借阅部、书刊流通部和数字信息部等一室五部。建筑面积为七千多平方米，近800座位席，馆藏图书38万册，全馆覆盖wifi。金山图书馆将利用良好的硬件设施和丰富馆藏，为广大市民提供更优质的文献和情报等服务，成为金山居民的阅读中心</p>-->
                        <!--<p>位于蒙山北路280号金文大厦内的金山图书馆新馆启用，内设综合办公室、宣传辅导部、古籍文献部、少儿借阅部、书刊流通部和数字信息部等一室五部。建筑面积为七千多平方米，近800座位席，馆藏图书38万册，全馆覆盖wifi。金山图书馆将利用良好的硬件设施和丰富馆藏，为广大市民提供更优质的文献和情报等服务，成为金山居民的阅读中心</p>-->
                        <!--<p>位于蒙山北路280号金文大厦内的金山图书馆新馆启用，内设综合办公室、宣传辅导部、古籍文献部、少儿借阅部、书刊流通部和数字信息部等一室五部。建筑面积为七千多平方米，近800座位席，馆藏图书38万册，全馆覆盖wifi。金山图书馆将利用良好的硬件设施和丰富馆藏，为广大市民提供更优质的文献和情报等服务，成为金山居民的阅读中心</p>-->
                        <!--<p>位于蒙山北路280号金文大厦内的金山图书馆新馆启用，内设综合办公室、宣传辅导部、古籍文献部、少儿借阅部、书刊流通部和数字信息部等一室五部。建筑面积为七千多平方米，近800座位席，馆藏图书38万册，全馆覆盖wifi。金山图书馆将利用良好的硬件设施和丰富馆藏，为广大市民提供更优质的文献和情报等服务，成为金山居民的阅读中心</p>-->
                    </div>

                </div>
                <div class="kp_title">通知公告</div>

            </div>

        </div>
        <div class="swiper-pagination swiper-pagination-father"></div>

    </div>
</div>

</body>
<script src="static/js/lib/rank/jquery.js"></script>
<script src="static/js/lib/rank/jquery.zySlide.js"></script>
<script src="static/js/lib/library/radialIndicator.js"></script>
<script src="static/js/lib/library/countUp.min.js"></script>
<!--<script src="static/js/lib/library/library.js"></script>-->
<!--<script src="static/js/lib/echarts.min.js"></script>-->
<script src="static/js/lib/rank/echarts.min.js"></script>

<script src="static/js/lib/borrow.js"></script>
<script src="static/js/lib/benguan_style.js"></script>
<script src="static/js/lib/benguan_script.js"></script>
<!--<script src="static/js/lib/notice.js"></script>-->
<!--<script src="static/js/lib/jquery-3.2.1.min.js"></script>-->
<script src="static/js/lib/swiper.min.js"></script>
<script src="static/js/view/index.js"></script>
<script>
    my_init();
</script>
</html>